<template>
  <section>
    <bread-crumb :model-value="navData"></bread-crumb>
    <table-component ref="tableRef" @show="handleShow"></table-component>
    <keep-alive>
      <component 
      :is="getComponent" 
      :rowData="rowData" 
      @close="handleClose"></component>
    </keep-alive>
  </section>
</template>
<script lang="ts" setup>
import { ref,computed } from "vue";
import TableComponent from "@/components/class/ClassTable.vue";
import InsertComponent from "@/components/class/ClassInsert.vue";
import UpdateComponent from "@/components/class/ClassUpdate.vue";
import CourseAllocate from "@/components/class/CourseAllocate.vue";
import BreadCrumb from "@/components/public/BreadCrumb.vue";

// 面包屑数据
const navData = [
  {
    name: "班级列表"
  }
]

// 关闭/隐藏组件
const showValue = ref<string>("");

const tableRef = ref<any>();

// 要修改的行数据
const rowData = ref<any>({});


/**
 * 显示组件
 * @param 
 */
const handleShow = (value: string,row?: any) => {
  showValue.value = value;
  if (row) {
    rowData.value = row;
  }
}

/**
 * 关闭组件
 * @param updated 是否有新数据更新（或更新的数据）
 */
const handleClose = (updated: boolean | any) => {
  showValue.value = "";
  if (updated) {
    if (tableRef?.value) {
      console.log("调用重置");
      tableRef.value.handleReset()
    }
  }
}

// 根据showValue值，获取要显示的组件
const getComponent = computed(() => {
  if (showValue.value == "update") {
    return UpdateComponent;
  } else if (showValue.value == "insert") {
    return InsertComponent;
  } else if (showValue.value == "course") {
    return CourseAllocate;
  } else {
    return null;
  }
})
</script>